<template>
    <el-container class="g-container" :class="`${showShadow ? '' : 'no-shadow'}` ">
        <slot name="title" />
        <slot name="status" />

        <el-header v-if="$slots.form" class="header">
            <slot name="form" />
        </el-header>
        <el-main class="main">
            <div v-if="$slots.form" class="line" />
            <div class="custom-button">
                <slot name="button" />
            </div>
            <slot name="table" />
        </el-main>
        <el-footer v-if="$slots.pagination" class="footer" style="height: auto;">
            <slot name="pagination" />
        </el-footer>
        <slot />
        <slot name="other" />
    </el-container>
</template>

<script>
export default {
    name: 'BasePage',
    props: {
        showShadow: {
            type: Boolean,
            default: true
        },
    },
}
</script>

<style lang="scss" scoped>

.g-container {
    width: 100%;
    height: 100%;
    border: 1px solid #f0f4f7;
    box-shadow: 0px 0px 4px 0px rgba(131, 145, 178, 0.14);
    padding: 24px 16px;
    .header {
        width: 100%;
        height: auto !important;
        min-height: 60px;
        padding: 0;
    }
    .line {
        margin-bottom: 24px;
        border-bottom: 1px solid #f0f4f7;
    }

    .custom-button {
        margin-bottom: 16px;
    }

    .main {
        width: 100%;
        display: block;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        flex-basis: auto;
        overflow: auto;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 0;
    }

    .footer {
        width: 100%;
        padding: 8px 16px 0 16px !important;
        display: flex;
        justify-content: flex-end;
    }
}
.no-shadow {
    border: 0;
    box-shadow: none;
}
</style>
